<template>
  <view class="container">
    <view class="topic_container">
      <u-list>
        <u-list-item>
          <view class="title">
            {{ topic.title }}
          </view>
          <u-line></u-line>
        </u-list-item>
        <u-list-item>
          <u-cell title="书单机构" :value="trainingSchool.schoolName">
            <u-icon slot="icon" name="home"></u-icon>
          </u-cell>
        </u-list-item>
        <u-list-item>
          <u-cell title="预定时间">
            <u-icon slot="icon" name="calendar"></u-icon>
            <view slot="value">{{ topic.startDate }} 至 {{ topic.endDate }}</view>
          </u-cell>
        </u-list-item>
        <u-list-item>
          <view class="letter_title">{{ letter.title }}</view>

          <u--image :showLoading="true" :src="letter.picUrl" width="100%" height="180px">
            <view slot="error" style="font-size: 24rpx;">加载失败</view>
          </u--image>

          <view class="letter_content">
            <rich-text :nodes="letter.content"></rich-text>
          </view>
        </u-list-item>

        <u-list-item>
          <view class="student_form">
            <u-line></u-line>
            <u--form labelPosition="left" :model="student" :labelWidth="80" labelAlign="right">
              <u-form-item label="学生：" prop="studentName" borderBottom>
                <u-input v-model="student.studentName" clearable @confirm="searchStudent"></u-input>
              </u-form-item>
              <u-form-item label="学校：" prop="classIds" borderBottom>
                <picker class="picker" @columnchange="pickerColumnChange" @change="pickerChange" :key="pickerKey" mode="multiSelector" :value="selectSchool" :range="classRange" range-key="label">
                  <view class="picker" style="line-height: 38px;">
                    <u--text v-if="!selectSchool || selectSchool.length === 0" text="请选择学校、年级、班级"></u--text>
                    <u--text v-else :text="selectSchool[0].label + ' > ' + selectSchool[1].label + ' > ' + selectSchool[2].label"></u--text>
                  </view>
                </picker>
                <u-icon slot="right" name="arrow-right"></u-icon>
              </u-form-item>
              <u-form-item label="联系电话：" prop="mobile" borderBottom>
                <u-input v-model="student.mobile" clearable type="number"></u-input>
              </u-form-item>
            </u--form>
          </view>
        </u-list-item>

        <u-list-item v-for="(item, index) in topicGoods" :key="index">
          <u-cell>
            <u-row slot="title" customStyle="margin-bottom: 10px; height: 40px;">
              <u-col span="1">
                <u-icon v-if="item.required" name="checkbox-mark" size="24" color="#fa3534"></u-icon>
                <u-checkbox v-if="!item.required" activeColor="red" :checked="checkGoodsIds.includes(item.id)" @change="value => checkGoods(item.id, value)"></u-checkbox>
              </u-col>
              <u-col span="3">
                <view class="goods_img">
                  <u--image class="image" :src="goodsImg" width="46" height="46">
                  </u--image>
                </view>
              </u-col>
              <u-col span="7">
                <u--text :text="item.goodsName"></u--text>
                <u--text type="warning" mode="price" :text="item.price" :lineHeight="20"></u--text>
              </u-col>
              <u-col span="1">
                <u-link text="详情" @click="handleGoodsDetail(item.goodsId)"></u-link>
              </u-col>
            </u-row>
          </u-cell>
        </u-list-item>
      </u-list>
    </view>

    <view class="cart-bottom">
      <u-checkbox v-model="checkedAllStatus" @change="checkedAll" label="全选" :name="cartTotal.checkedGoodsCount"></u-checkbox>
      <view class="total">
        <u--text mode="price" align="right" :text="checkedGoodsAmount"></u--text>
      </view>
      <view class='action_btn_area'>
        <view class="checkout" @click="checkoutOrder">缴费</view>
      </view>
    </view>

    <u-modal :show="detailShow" title="书单详情" confirmText="关闭" @confirm="detailShow = false">
      <view class="slot-content">
        <rich-text :nodes="goodsDetail"></rich-text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import {getTopic} from "../../api/topic/topic";
import {getGoodsDetail} from "../../api/topic/goods";
import {searchStudentByName} from "../../api/basic/student";
import {classTree} from "../../api/system/school_class";
import {submitOrder} from "../../api/order/order";

export default {
  data() {
    return {
      mobile: this.$store.state.user.mobile,
      topicCode: '',
      letter: {},
      topic: {
        title: ''
      },
      trainingSchool: {},
      topicGoods: [],
      checkGoodsIds: [],
      checkedAllStatus: true,
      goodsImg: require("@/static/images/book.png"),
      cartTotal: {
        checkedGoodsCount: 10
      },
      student: {
        studentName: '张三',
        classIds: '',
        classNames: '',
        mobile: '',
      },
      classTree: [],
      classRange: [],
      selectSchool: [],
      pickerKey: '1',
      detailShow: false,
      goodsDetail: '',
    }
  },
  onLoad: function () {
    //let topicCode = uni.getStorageSync("topicCode");
    let topicCode = 'JF20240001'

    // 查询书单详情
    this.getTopicByCode(topicCode)
  },
  computed: {
    checkedGoodsAmount() {
      let checkedGoodsAmount = 0.00
      this.topicGoods.forEach(item => {
        if (this.checkGoodsIds.includes(item.id)) {
          checkedGoodsAmount += parseFloat(item.price)
        }
      })
      return checkedGoodsAmount
    }
  },
  created() {
  },
  methods: {
    getTopicByCode(topicCode) {
      getTopic(topicCode).then(res => {
        if (res.code === 200) {
          let data = res.data

          this.letter = data.letter
          this.topic = data.topic
          this.trainingSchool = data.trainingSchool
          this.topicGoods = data.topicGoods

          this.topicGoods.forEach(item => {
            if (item.required) {
              this.checkGoodsIds.push(item.id)
            }
          })

          // 查询年级班级
          this.getClassTress()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleGoodsDetail(goodsId) {
      this.goodsDetail = ''
      getGoodsDetail(goodsId).then(res => {
        if (res.code === 200) {
          let data = res.data.info

          this.detailShow = true
          this.goodsDetail = data.detail
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getClassTress() {
      classTree(this.topic.id).then(res => {
        this.classTree = res.data

        this.classRange = []
        this.classTreeRecursion(res.data)
      }).catch(err => {
      })
    },
    // classTree递归获取下级所有节点
    classTreeRecursion(data) {
      this.classRange.push(data)

      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          if (data[i].children && data[i].children.length > 0) {
            this.classTreeRecursion(data[i].children)
          }
          break
        }
      }
    },
    pickerColumnChange(e) {
      let level = e.detail.column
      let index = e.detail.value

      // 当前选中的节点
      let parObj = this.classRange[level][index];
      console.log(parObj, 'parObj')

      let classRange = []
      for (let i = 0; i <= level; i++) {
        classRange.push(this.classRange[i])
      }
      this.classRange = classRange

      if (parObj.children && parObj.children.length > 0) {
        this.classTreeRecursion(parObj.children)
      }
    },
    pickerChange(e) {
      let selectSchool = []
      let valuesIndex = e.detail.value
      for (let i = 0; i < valuesIndex.length; i++) {
        let index = valuesIndex[i]
        selectSchool.push(this.classRange[i][index])
      }
      this.selectSchool = selectSchool

      console.log(selectSchool, 'selectSchool')
      console.log(this.selectSchool, 'this.selectSchool')
    },
    checkedAll(value) {
      this.checkGoodsIds = []
      if (value) {
        this.topicGoods.forEach(item => {
          this.checkGoodsIds.push(item.id)
        })
      } else {
        this.topicGoods.forEach(item => {
          if (item.required) {
            this.checkGoodsIds.push(item.id)
          }
        })
      }
    },
    checkoutOrder() {
      let order = {goodsType: 1, topicId: this.topic.id, studentId: this.student.id, checkGoodsIds: this.checkGoodsIds}
      console.log(order, 'submitOrder')

      submitOrder(order).then(res=>{

      }).catch(err => {
        console.log(err)
      })
    },
    checkGoods(topicGoodsId, value) {
      if (value) {
        this.checkGoodsIds.push(topicGoodsId)
      } else {
        this.checkGoodsIds = this.checkGoodsIds.filter(item => item !== topicGoodsId)
      }
    },
    searchStudent() {
      let topicId = this.topic.id;
      let studentName = this.student.studentName;

      searchStudentByName(topicId, studentName).then(res => {
        if (res.code === 200) {
          let students = res.data

          if (students && students.length === 1) {
            this.selectSchool = students[0].classes

            this.student = Object.assign({}, students[0])
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}

.container {
  .topic_container {
    padding-bottom: 200px;
    background-color: #fff;

    .title {
      text-align: center;
      font-size: 26px;
      margin: 12px;
    }

    .letter_title {
      text-align: center;
      font-size: 22px;
      margin: 10px;
    }

    .letter_content {
      margin: 0 15px;
    }

    .goods_img {
      margin: 20px;

      .image {
        display: block;
      }
    }

    .student_form {
      padding: 10px;
    }
  }

  .cart-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100rpx;
    width: 100%;
    background: #fff;
    display: flex;

    .u-checkbox {
      float: left;
      margin: 33rpx 18rpx 33rpx 26rpx;
      font-size: 29rpx;
    }

    .total {
      height: 34rpx;
      flex: 1;
      margin: 33rpx 10rpx;
      font-size: 29rpx;
    }

    .checkout {
      height: 100rpx;
      width: 210rpx;
      text-align: center;
      line-height: 100rpx;
      font-size: 35rpx;
      background: #d4380d;
      color: #fff;
    }
  }
}
</style>
